$prefix: "dtc-drawer";

.#{$prefix} {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 999;
    pointer-events: none;
    &-mask {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5);
        pointer-events: auto;
    }
    &-content-wrapper {
        position: absolute;
        z-index: 999;
        overflow: hidden;
        top: 0;
        right: 0;
        bottom: 0;
        box-shadow: -10px 0 20px 0 rgba(61, 68, 110, 0.1);
        &-hidden {
            display: none;
        }
    }
    &-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: #FFF;
        pointer-events: auto;
    }
    &-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        background-color: #F9F9FA;
        color: #3D446E;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        &--icon {
            color: #64698B;
            font-size: 16px;
        }
    }
    &-tabs {
        &.ant-tabs {
            height: auto;
            .ant-tabs-nav {
                margin-bottom: 0;
            }
        }
        .ant-tabs-nav-wrap {
            background: #F9F9FA;
            padding-left: 16px;
            border-bottom: 1px solid #EBECF0;
        }
    }
    &-body {
        flex: 1;
        min-height: 0;
        padding: 16px;
        overflow-y: scroll;
    }
    &-footer {
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 16px;
        border-top: 1px solid #EBECF0;
    }
    &-icon {
        width: 12px;
        height: 56px;
        position: absolute;
        top: calc(50% - 28px);
        left: 0;
        z-index: 999;
        cursor: pointer;
    }
    &-nested-loading {
        height: 100%;
        .ant-spin-container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
    }
}

$duration: 0.3s;

.mask-motion {
    &-enter,
    &-appear,
    &-leave {
        &-active {
            transition: all $duration;
        }
    }
    &-enter,
    &-appear {
        opacity: 0;
        &-active {
            opacity: 1;
        }
    }
    &-leave {
        opacity: 1;
        &-active {
            opacity: 0;
        }
    }
}

.panel-motion {
    &-left {
        &-enter,
        &-appear,
        &-leave {
            &-start {
                transition: none !important;
            }
            &-active {
                transition: all $duration;
            }
        }
        &-enter,
        &-appear {
            transform: translateX(-100%);
            &-active {
                transform: translateX(0);
            }
        }
        &-leave {
            transform: translateX(0);
            &-active {
                transform: translateX(-100%) !important;
            }
        }
    }
    &-right {
        &-enter,
        &-appear,
        &-leave {
            &-start {
                transition: none !important;
            }
            &-active {
                transition: all $duration;
            }
        }
        &-enter,
        &-appear {
            transform: translateX(100%);
            &-active {
                transform: translateX(0);
            }
        }
        &-leave {
            transform: translateX(0);
            &-active {
                transform: translateX(100%) !important;
            }
        }
    }
}
